<template>
  <div class='container'>
    <div class="app-container">
      <el-card shadow="never">
        <el-breadcrumb
          v-if="$route.query.id"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 顶部搜索 -->
        <el-col :span="18">
          <el-form label-width="80px" :model="searchFrom" :inline="true" ref="searchfrom">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model.trim="searchFrom.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select  placeholder="请选择" v-model="searchFrom.state">
                <el-option
                  v-for="(item, i) in status"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="default" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="toSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button
            type="text"
            icon="el-icon-back"
            v-if="$route.query.id"
            @click="$router.push('/subjects/list')"
            >返回学科</el-button>
          <el-button class="add-btn" icon="el-icon-edit" type="success" size="small" @click="showadd">新增标签</el-button>
        </el-col>
        <!-- 提示框 -->
        <el-alert
          :title="`共有${total}条数据`"
          type="info"
          :closable="false"
          show-icon
        > 
        </el-alert>
        <!-- 表格 -->
        <el-table
          :data="tableDataList"
          style="width: 100%">
          <el-table-column
            width="100"
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            >
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称"
           >
          </el-table-column>
          <el-table-column
            prop="creatorID"
            label="创建者"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.creatorID == 2">超级管理员</span>
                <span v-else>录入管理员</span>
              </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            >
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">已启用</span>
                <span v-else>已禁用</span>
              </template>
          </el-table-column>
          <el-table-column
            label="操作"
            >
            <template slot-scope="scope">
              <el-button v-if="scope.row.state===1" type="text" size="medium" @click="close(scope.row)">禁用</el-button>
              <el-button v-else type="text" size="medium" @click="open(scope.row)">启用</el-button>
              <el-button type="text" size="medium" :disabled="scope.row.state===1" @click="showedit(scope.row)">修改</el-button>
              <el-button type="text" size="medium" :disabled="scope.row.state===1" @click="removeById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.searchFrom.page"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 新增标签对话框 -->
        <add-dialog :subjectList="subjectList" ref="dialog" @update="addTags"></add-dialog>
        <!-- 编辑标签对话框 -->
        <edit-dialog :subjectList="subjectList" :row="row" ref="editDialog" @update="editTags"></edit-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { status } from '@/api/hmmm/constants'
import { list, changeState, remove, add, update } from '@/api/hmmm/tags'
import AddDialog from '../components/tags-add'
import EditDialog from '../components/tags-edit'
export default {
  name: 'TagsIndex',
  data () {
    return {
      searchFrom: {
        tagName: '',
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: this.$route.query.id
      },
      // 新增学科数据
      subjectList: [],
      // 状态数据
      status,
      // 表格数据
      tableDataList: [],
      // 总数
      total: 0,
      // 修改的数据
      row: {}
    }
  },
  created () {
    // 获取标签列表
    this.getTagsList()
    // 新增  学科数据
    this.getSubject()
  },
  methods: {
    async getTagsList () {
      const res = await list(this.searchFrom)
      if (res.status === 200) {
        this.tableDataList = res.data.items
        this.total = res.data.counts
      } else {
        this.$message.error('获取数据失败')
      }
    },
    // 清除表单
    clear () {
      this.$refs.searchfrom.resetFields()
      this.getTagsList()
    },
    // 搜索
    toSearch () {
      this.getTagsList()
    },
    // 启用
    async open (row) {
      await changeState({
        state: 1,
        id: row.id
      })
      this.$message.success('操作成功')
      row.state = 1
    },
    // 禁用
    async close (row) {
      await changeState({
        state: 0,
        id: row.id
      })
      this.$message.success('操作成功')
      row.state = 0
    },
    // 分页
    handleSizeChange (val) {
      this.searchFrom.pagesize = val
      this.getTagsList()
    },
    handleCurrentChange (val) {
      this.searchFrom.page = val
      this.getTagsList()
    },
    // 删除
    async removeById (id) {
      const res = await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') return this.$message.info('已取消删除')
      await remove({
        id
      })
      this.getTagsList()
    },
    showadd () {
      this.$refs.dialog.addTagsDialogVisible = true
    },
    // 获取学科信息
    async getSubject () {
      const res = await simple()
      // console.log(res)
      if (res.status === 200) {
        this.subjectList = res.data
      } else {
        this.$message.error('获取数据失败')
      }
    },
    // 添加标签
    async addTags(e) {
      await add(e)
      this.$message.success('添加标签成功')
      this.$refs.dialog.addTagsDialogVisible = false
      this.getTagsList()
    },
    // 修改对话框展示
    showedit (row) {
      this.row = row
      this.$refs.editDialog.addTagsDialogVisible = true
    },
    // 实现编辑
    async editTags (e) {
      e.id = this.row.id
      await update(e)
      this.$message.success('标签修改成功')
      this.$refs.editDialog.addTagsDialogVisible = false
      this.getTagsList()
    }
  },
  components: {
    AddDialog,
    EditDialog
  }
}
</script>

<style scoped lang='less'>
.el-table {
  margin: 20px 0;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>
